<template>
    <a-layout style="height: 100vh;">
        <!-- 侧边菜单 -->
        <SideMenuLayout v-if="layouType == 'sidemenu'" />
        <TopMenuLayout v-else />
        <a-layout>
            <!-- 顶部栏 -->
            <a-layout-header :style="{ background: '#fff', padding: 0 }" v-if="layouType === 'sidemenu'">
                <Hearders />
            </a-layout-header>
            <!-- 多页签 -->
            <a-divider class="m-0" />
            <a-layout-header :style="{ background: '#fff', padding: '10px' }" v-if="tagShow">
                <TagsView />
            </a-layout-header>
            <!-- 内容 -->
            <Layout />
            <!-- 底部栏 -->
            <a-layout-footer style="text-align: center">
                Ant Design ©2018 Created by Ant UED
            </a-layout-footer>
        </a-layout>
        <Setting @change="settings" />
    </a-layout>
</template>
<script>
import Layout from './Layout.vue';
import Setting from './setting.vue'
import Hearders from '@/components/Header/header.vue';
import TagsView from '@/components/TagsView/index.vue';
import TopMenuLayout from '@/layouts/silder/TopMenuLayout.vue';
import SideMenuLayout from '@/layouts/silder/SideMenuLayout.vue';
export default {
    components: { Layout, TagsView, Setting, Hearders, SideMenuLayout, TopMenuLayout },
    data() {
        return {
            layouType: 'sidemenu',
            theme: 'light',
            tagShow: true,
        };
    },
    mounted() {
        const laymode = localStorage.getItem('themes');
        if (laymode) {
            this.layouType = JSON.parse(laymode).layoutMode;
            this.theme = JSON.parse(laymode).navTheme
            this.tagShow = JSON.parse(laymode).tagShow
        }
    },
    methods: {
        settings(val) {
            this.layouType = val.layoutMode;
            this.theme = val.navTheme
            this.tagShow = val.tagShow
        },
    }
};
</script>
<style scoped>
.logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
}
</style>